<template>
  <n-loading-bar-provider>
    <n-message-provider>
      <n-notification-provider>
        <n-modal-provider>
          <n-dialog-provider>
            <Switch />
          </n-dialog-provider>
        </n-modal-provider>
      </n-notification-provider>
    </n-message-provider>
  </n-loading-bar-provider>
  <!-- <div>
    <GlareHover />
  </div> -->
  <!-- <WasmDemo /> -->
  <RenderPriority>
    <TestRender />
  </RenderPriority>
  <WatchComputed />
</template>

<script>
import {
  NDialogProvider,
  NLoadingBarProvider,
  NMessageProvider,
  NModalProvider,
  NNotificationProvider,
} from "naive-ui";
import { defineComponent, ref } from "vue";
import Switch from "./Switch.vue";
import GlareHover from "@/animations/GlareHover.vue";
import WasmDemo from "@/wasm/WasmDemo.vue";
import RenderPriority from "@/base/RenderPriority.vue";
import TestRender from "@/base/TestRender.tsx";
import WatchComputed from "./WatchComputed.vue";

export default defineComponent({
  components: {
    TestRender,
    RenderPriority,
    WasmDemo,
    GlareHover,
    Switch,
    NMessageProvider,
    NLoadingBarProvider,
    NNotificationProvider,
    NModalProvider,
    NDialogProvider,
    WatchComputed,
  },
});

const ref1 = ref(1);
console.log(typeof ref1);
console.log(ref1);

console.log(ref1.value);
</script>

<style scoped>
.demo-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 500px;
  margin-top: 1.4rem;
  display: flex;
  position: relative;
  background: rgb(11, 11, 11);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(20, 34, 22);
  border-image: initial;
  border-radius: 20px;
  padding: 1em;
}
</style>
